<!-- 
    代码来自mikaisa
    Gitee: @mikaisazzz
    原创不易，使用请注明出处
 -->
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }
 
         html,
         body {
             width: 100%;
             height: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
         }
 
         canvas {
             border: 2px solid black;
         }
         .colors{
            width: 50px;
            height: 600px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
         }
         .colors>div{
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 2vw;
         }
     </style>
 </head>
 
 <body>
    <div class="colors">
        <div style="background-color: aqua;"></div>
        <div style="background-color: skyblue;"></div>
        <div style="background-color: black;"></div>
        <div style="background-color: darkorange;"></div>
        <div style="background-color: yellowgreen;"></div>
        <div style="background-color: red;"></div>
        <div style="background-color: darkgray;"></div>
        <div style="background-color: yellow;"></div>
        <div style="background-color: violet"></div>
        <div style="background-color:royalblue;"></div>
        <div style="background-color:purple;"></div>
        <div style="background-color:tomato;"></div>
    </div>
     <canvas width="1000" height="600"></canvas>
     <script>
         let canvas = document.querySelector('canvas')
         let ctx = canvas.getContext('2d')
         let isPainting = false

         let colors = document.querySelector('.colors')
 
         canvas.onmousedown = (event) => {
             event.stopPropagation()
             isPainting = true
             ctx.beginPath()
             ctx.lineCap = 'round'
             ctx.lineWidth = 2
             ctx.moveTo(event.offsetX, event.offsetY)
         }
 
         canvas.onmousemove = (event) => {
             event.stopPropagation()
             if (isPainting) {
                 ctx.lineTo(event.offsetX, event.offsetY)
                 ctx.stroke()
             }
         }
 
         canvas.onmouseup = (event) => {
             event.stopPropagation()
             isPainting = false
         }

         document.onmousemove = (event) => {
             isPainting = false
         }

         colors.onclick = (e)=>{
            ctx.strokeStyle = e.target.style.backgroundColor
            Array.from(colors.children).forEach(item=>{
                item.innerHTML = ''
            })
            e.target.innerHTML = 'T'
         }
     </script>
 </body>
 
 </html>